<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
    initialValue: { x: 150, y: 150 },
})
</script>

<template>
    <div ref="el" :style="style" class="curve-x-handler">
    </div>
</template>

<style scoped>
.curve-x-handler {
    position: fixed;
    cursor: grab;

    width: 15px;
    height: 15px;
    border-radius: 100px;

    /* transform: translate(-50%, 50%); */
    background: red;
}
.curve-x-handler:hover {
    cursor: grabbing;
}
.curve-x-handler:active {
    cursor: grabbing;
}
</style>